<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>显示会议信息</title>
        <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
        <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
        <link href="../../../static/css/select.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="../../../static/js/jquery.js"></script>
        <script type="text/javascript" src="../../../static/js/jquery.idTabs.min.js"></script>
        <script type="text/javascript" src="../../../static/js/select-ui.min.js"></script>
        <script type="text/javascript" src="../../../static/editor/kindeditor.js"></script>

        <script type="text/javascript" src="../../../static/js/vue.js"></script>
        <script type="text/javascript" src="../../../static/js/axios.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function (e) {
                $(".select1").uedSelect({
                    width: 345
                });

            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".click").click(function () {
                    $(".tip").fadeIn(200);
                });
                $(".sure").click(function () {
                    $(".tip").fadeOut(100);
                });

                $(".tiptop a").click(function () {
                    $(".tip").fadeOut(200);
                });

                $(".cancel").click(function () {
                    $(".tip").fadeOut(100);
                });

            });
        </script>
    </head>

    <body>

        <div class="place">
            <span>位置：</span>
            <ul class="placeul">
                <li><a href="#">会议管理</a></li>
                <li><a href="#">会议管理</a></li>
            </ul>
        </div>

        <div class="formbody" id="showRoom"  >

            <ul class="prosearch">
                <li>
                    <label>查询：</label>
                    <i>会议室名</i>
                       <a><input name="meetRoomName" id="meetRoomName" type="text" class="scinput"/></a>
                    <i>最小会议开始时间：</i>
                        <a><input  type="datetime-local" id="minmeetstarttime" class="scinput"
                               @change="testStartTime()"/></a>
                    <i>最大会议开始时间：</i>
                    <a><input  type="datetime-local" id="maxmeetstarttime" class="scinput"
                               @change="testEndTime()"/></a>
                </li>
                <a>
                    <input name="" type="button" class="sure" @click="lunbo(1)" value="查询"/>
                    <input type="button" value="返回" class="btn" onclick="window.history.go(-1);"/>
                </a>
            </ul>


            <div class="formtitle"><span>会议信息</span></div>
            <div v-if="messages == ''"> <h3>没有会议信息</h3></div>
            <table class="tablelist" v-if="messages != ''">
                <thead>
                    <tr>
                        <th>会议号</th>
                        <th>预约部门</th>
                        <th>会议开始时间</th>
                        <th>会议结束时间</th>
                        <th>预约人</th>
                        <th>会议状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for=" reservationmeetroom in messages ">
                        <td>{{reservationmeetroom.rid}}</td>
                        <td>{{reservationmeetroom.dept.deptName}}</td>
                        <td>{{reservationmeetroom.meetstarttime}}</td>
                        <td>{{reservationmeetroom.meetendtime}}</td>
                        <td>
                            {{reservationmeetroom.reservationUserName}}
                        </td>
                        <td v-if="reservationmeetroom.status ==0">待审批</td>
                        <td v-if="reservationmeetroom.status ==1">失效</td>
                        <td v-if="reservationmeetroom.status ==2">审批通过</td>
                        <td v-if="reservationmeetroom.status ==3">审批不通过</td>
                        <td><a href="javascript:;" class="tablelink" @click="todelete(reservationmeetroom.rid)">取消</a></td>
                    </tr>
                </tbody>
            </table>

            <div class="pagin" v-if="messages != ''">
                <div class="message">共<i class="blue">{{pageModel.totalRows}}</i>条记录，当前显示第&nbsp;<i
                        class="blue">{{pageModel.pageNum}}&nbsp;</i>页
                </div>
                <!--总页数大于7页的时候-->
                <ul class="paginList" v-if="pageModel.totalPage>7">
                    <li class="paginItem"><a href="javascript:;"
                                             @click="lunbo(pageModel.pageNum==1?1:pageModel.pageNum-1)"><span
                            v-bind:class="pageModel.pageNum==1?'pagepre':'pagepre0'"></span></a></li>
                    <!--第一个格子-->
                    <li v-bind:class="pageModel.pageNum==1?'paginItem current':'paginItem'">
                        <a href="javascript:;" @click="lunbo(1)">1</a>
                    </li>

                    <!--第二个格子-->
                    <li class="paginItem" v-if="(pageModel.pageNum> pageModel.totalPage-5) && (pageModel.pageNum>5) "><a
                            href="javascript:;">...</a></li>
                    <li v-bind:class="pageModel.pageNum==2?'paginItem current':'paginItem'"
                        v-if="(pageModel.pageNum<=5) || (pageModel.pageNum<=pageModel.totalPage-5 && pageModel.pageNum>5)">
                        <a href="javascript:;" @click="lunbo(2)">2</a>
                    </li>

                    <!--第三个格子-->
                    <li class="paginItem" v-if="5<pageModel.pageNum && pageModel.pageNum<=(pageModel.totalPage-5)"><a
                            href="javascript:;">...</a></li>
                    <li v-bind:class="pageModel.pageNum==3?'paginItem current':'paginItem'" v-if="pageModel.pageNum<=5">
                        <a href="javascript:;" @click="lunbo(3)">3</a></li>
                    <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-4)?'paginItem current':'paginItem'"
                        v-if="(pageModel.pageNum>pageModel.totalPage-5) && (pageModel.pageNum>5)"><a href="javascript:;"
                                                                                                     @click="lunbo(pageModel.totalPage-4)">{{pageModel.totalPage - 4}}</a>
                    </li>

                    <!--第四个格子-->
                    <li v-bind:class="pageModel.pageNum==4?'paginItem current':'paginItem'" v-if="pageModel.pageNum<=5">
                        <a href="javascript:;" @click="lunbo(4)">4</a></li>
                    <li class="paginItem current"
                        v-if="5<pageModel.pageNum && pageModel.pageNum<=(pageModel.totalPage-5)"><a href="javascript:;">{{pageModel.pageNum}}</a>
                    </li>
                    <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-3)?'paginItem current':'paginItem'"
                        v-if="(pageModel.pageNum>pageModel.totalPage-5) && (pageModel.pageNum>5)"><a href="javascript:;"
                                                                                                     @click="lunbo(pageModel.totalPage-3)">{{pageModel.totalPage - 3}}</a>
                    </li>

                    <!--第五个格子-->
                    <li v-bind:class="pageModel.pageNum==5?'paginItem current':'paginItem'" v-if="pageModel.pageNum<=5">
                        <a href="javascript:;" @click="lunbo(5)">5</a></li>
                    <li class="paginItem" v-if="5<pageModel.pageNum && pageModel.pageNum<=(pageModel.totalPage-5)"><a
                            href="javascript:;">...</a></li>
                    <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-2)?'paginItem current':'paginItem'"
                        v-if="(pageModel.pageNum>pageModel.totalPage-5) && (pageModel.pageNum>5)"><a href="javascript:;"
                                                                                                     @click="lunbo(pageModel.totalPage-2)">{{pageModel.totalPage - 2}}</a>
                    </li>

                    <!--第六个格子-->
                    <li class="paginItem" v-if="pageModel.pageNum<=5"><a href="javascript:;">...</a></li>
                    <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-1)?'paginItem current':'paginItem'"
                        v-if="pageModel.pageNum>5"><a href="javascript:;"
                                                      @click="lunbo(pageModel.totalPage-1)">{{pageModel.totalPage - 1}}</a>
                    </li>

                    <!--第七个格子-->
                    <li v-bind:class="pageModel.pageNum==pageModel.totalPage?'paginItem current':'paginItem'"><a
                            href="javascript:;" @click="lunbo(pageModel.totalPage)">{{pageModel.totalPage}}</a></li>

                    <!--        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>-->
                    <li class="paginItem"><a href="javascript:;"
                                             @click="lunbo(pageModel.pageNum==pageModel.totalPage?pageModel.totalPage:pageModel.pageNum+1)"><span
                            v-bind:class="pageModel.pageNum==pageModel.totalPage?'pagenxt0':'pagenxt'"></span></a></li>
                </ul>
                <!--总页数小于8页的时候-->
                <ul class="paginList" v-if="pageModel.totalPage<=7">
                    <li class="paginItem"><a href="javascript:;"
                                             @click="lunbo(pageModel.pageNum==1?1:pageModel.pageNum-1)"><span
                            v-bind:class="pageModel.pageNum==1?'pagepre':'pagepre0'"></span></a></li>

                    <li v-for="index of pageModel.totalPage" :key="index"
                        v-bind:class="index == pageModel.pageNum?'paginItem current':'paginItem'">
                        <a href="javascript:;" @click="lunbo(index)">{{index}}</a>
                    </li>

                    <li class="paginItem"><a href="javascript:;"
                                             @click="lunbo(pageModel.pageNum==pageModel.totalPage?pageModel.totalPage:pageModel.pageNum+1)"><span
                            v-bind:class="pageModel.pageNum==pageModel.totalPage?'pagenxt0':'pagenxt'"></span></a></li>
                </ul>
            </div>

            <div class="tip">
                <div class="tiptop"><span>取消会议</span>
                    <a></a>
                </div>

                <div class="tipinfo">
                    <span><img src="../../../static/images/ticon.png"/></span>
                    <div class="tipright">
                        <p>是否确认对会议进行取消 ？</p>
                        <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
                    </div>
                </div>

                <div class="tipbtn">
                    <input name="" type="button" class="sure" @click="deleteOne()" value="确定" />&nbsp;
                    <input name="" type="button" class="cancel" value="取消"/>
                </div>

            </div>
        </div>

        <script type="text/javascript">
            var params = window.location.search;
            var uid = params.split("=").at(1);

            var meetRoomName = $("#meetRoomName").val();
            var maxmeetstarttime = $('#maxmeetstarttime').val();
            var minmeetstarttime = $('#minmeetstarttime').val();
            var start = null;
            var end = null;

            //取消会议id
            var r_id = null;

            //用户信息
            //var customOneName = JSON.parse(sessionStorage.getItem("customer"));

            var vm = new Vue({
                el: "#showRoom",
                data:
                    {
                        customOneName:'',
                        messages: '',
                        pageModel: '',
                    },
                methods: {
                    send() {
                        axios({
                            method: 'post',
                            url: 'http://localhost:8099/reservationmeetroom/list',
                            params: {
                                "uid": uid,
                                "meetRoomName": meetRoomName,
                                "minmeetstarttime": start,
                                "maxmeetstarttime": end,
                                "pageNum": this.pageModel.pageNum,
                                "pageSize": this.pageModel.pageSize,
                            },
                        }).then(function (res) {
                            vm.customOneName = JSON.parse(sessionStorage.getItem("customer"));
                            vm.messages = res.data.data;
                            vm.pageModel = res.data;
                        }).catch(function (reason) {
                            console.log(reason);
                        })
                    },
                    todelete: function (ele) {
                        r_id = ele;
                        $(".tip").fadeIn(200);
                       /* $(".tip .sure").click(function () {
                            axios({
                                method:'post',
                                url:'http://localhost:8099/reservationmeetroom/delete/'+ele,
                            }).then(function(res){
                                alert("取消成功!!!");
                                $(".tip").fadeOut(200);
                                vm.send();
                            }).catch(function (reason) {
                                alert("取消失败!!!");
                            })
                        });*/
                        $(".sure").click(function () {
                            $(".tip").fadeOut(100);
                        });

                        $(".tiptop a").click(function () {
                            $(".tip").fadeOut(200);
                        });

                        $(".cancel").click(function () {
                            $(".tip").fadeOut(100);
                        });

                    },
                    deleteOne: function () {
                             axios({
                                 method:'post',
                                 url:'http://localhost:8099/reservationmeetroom/delete/'+r_id,
                             }).then(function(res){
                                 alert("取消成功!!!");
                                 vm.send();
                             }).catch(function (reason) {
                                 alert("取消失败!!!");
                             })
                    },
                    lunbo: function (ele) {
                        // alert(ele);
                        vm.setParams();
                        vm.pageModel.pageNum = ele;
                        this.send();
                    },
                    testStartTime() {
                        var maxmeetstarttime = $('#maxmeetstarttime').val();
                        var minmeetstarttime = $('#minmeetstarttime').val();

                        var start = new Date(minmeetstarttime);
                        var end = new Date(maxmeetstarttime);
                        if (end - start <= 0) {
                            $('#minmeetstarttime').val("");
                            alert("最大时间小于最小时间，请重新选择最小开始时间！！！");
                        }
                    },
                    testEndTime() {
                        var maxmeetstarttime = $('#maxmeetstarttime').val();
                        var minmeetstarttime = $('#minmeetstarttime').val();

                        var start = new Date(minmeetstarttime);
                        var end = new Date(maxmeetstarttime);

                        if (end - start <= 0) {
                            $('#maxmeetstarttime').val("");
                            alert("最大时间小于最小时间，请重新选择最大开始时间！！！");
                        }
                    },
                    setParams(){
                         meetRoomName = $("#meetRoomName").val();
                         maxmeetstarttime = $('#maxmeetstarttime').val();
                         minmeetstarttime = $('#minmeetstarttime').val();
                        if(maxmeetstarttime != null && maxmeetstarttime != ""){
                            end = this.dateFormat(new Date(maxmeetstarttime));
                        }
                        if(minmeetstarttime != null && minmeetstarttime != ""){
                            start = this.dateFormat(new Date(minmeetstarttime));
                        }

                    },
                    dateFormat(date){
                        var nowTime = new Date(date);
                        var year = nowTime.getFullYear();
                        var month = nowTime.getMonth()+1;
                        var day = nowTime.getDate();
                        var hour = nowTime.getHours();
                        var minutes = nowTime.getMinutes();
                        var second = nowTime.getSeconds();
                        if(month>0 && month<10){
                            month = "0"+month;
                        }
                        if(day>0 && day<10){
                            day = "0"+day;
                        }
                        if(hour>0 && hour<10){
                            hour = (hour-8+24)%24
                            hour = "0"+hour;
                        }
                        if(minutes>0 && minutes<10){
                            minutes = "0"+minutes;
                        }
                        if(second>0 && second<10){
                            second = "0"+second;
                        }
                        var nowDate = year+"-"+month+"-"+day+" "+hour+":"+minutes+":"+second;
                        return nowDate;
                    }
                },
                //页面加载完自动执行
                mounted() {
                    this.send();
                    // var customOneName = JSON.parse(sessionStorage.getItem("customer"));
                }
            });
        </script>

    </body>

</html>